<template>
      <el-header class="header" height="80">
        <el-menu
                class="el-menu-demo"
                :default-active="active"
                mode="horizontal"
                style="margin-left: 50px; margin-right: 50px; justify-content: space-between; height: 100px; "
                :router="true"
            >
                <el-menu-item index="admin">管理员</el-menu-item>
                <el-menu-item index="user">用户管理</el-menu-item>
                <el-menu-item index="comclass">分类管理</el-menu-item>
                <el-menu-item index="goods">商品管理</el-menu-item>
                <el-menu-item index="deliverGoods">发货/出库</el-menu-item>

                    <el-menu-item style="margin-left: 15%;">
                        <div>
                            <Dark></Dark>
                        </div>
                    </el-menu-item>
                    <el-menu-item index="login" v-if="condition">登录</el-menu-item>
                    <el-sub-menu index="login" v-if="!condition">
                        <template #title><el-avatar :size="50" :src="data.img" style="margin-right: 5px;"/>{{ username }}</template>
                        <el-menu-item @click="esc()">注销</el-menu-item>
                    </el-sub-menu>

            </el-menu>
      </el-header>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

import Dark from './dark.vue'
import { ref, reactive, toRefs,computed, onMounted } from "vue"
const router = useRouter()
onMounted(()=>{
    data.active = (router.currentRoute.value.name)as string
})
const data = reactive<{
    username: string | null;
    active:string
    img:string
}>({
    username: '',
    active:"",
    img: ""
})

data.username = window.localStorage.getItem("d_user")
data.img = window.localStorage.getItem("d_avatar") as string
const condition = computed(()=>{
    return data.username == null ? true: false
})
const esc = ()=>{
    window.localStorage.removeItem("d_user")
    window.localStorage.removeItem("d_token")
    window.localStorage.removeItem("d_avatar")
    router.push("/login")
}
const { username, active } = toRefs(data)
</script>

<style lang="scss" scoped>
// .header {
//     background-color:#DCDFE6;
//     border: 1px solid #DCDFE6;
//     backdrop-filter: blur(6px);
//     display: flex;
//     .row{
//       width: 100%;
//       align-items: center;
//     }
//   }
</style>